<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
    </view>
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <text>
        领取记录
      </text>
    </view>
    <view class="boxtop" v-if="collectData.merchantInformation">
      <image
        class="top_img"
        :src="collectData.merchantInformation.storePicture"
        mode="scaleToFill"
        @click="shopDetail(collectData)"
      />
      <view class="top_right">
        <view class="flex">
          <view class="flex_left_box">
        <view class="top_name">
          {{collectData.merchantInformation.merchantName}}
        </view>
            <view class="red" v-if="collectData.merchantInformation.score"> 服务好评率{{Number(collectData.merchantInformation.score).toFixed(0)}}%</view>
            <view class="red" v-else>暂无评分</view>
            <view class="address" style="line-height: 30rpx;">
              {{collectData.merchantInformation.storeAddress}}
            </view>
          </view>
          <view class="distance" @click="openMap(collectData.merchantInformation)">
            <image class="img"
              src="https://pic.bangbangtongcheng.com/static/member/mapto.png" mode="">
            </image>
            
            <!-- <image class="img"
              src="https://pic.bangbangtongcheng.com/static/bbcz/Navigation.png" mode="">
            </image> -->
            {{collectData.merchantInformation.distance}}km
          </view>
        </view>
        
      </view>
    </view>
    <view class="content">
      <view class="list">
        <view class="item" v-for="(item, index) in collectList" :key="index">
          <image
            :src="item.giftPicture"
            mode="scaleToFill"
            class="item_img"
          />
          <view class="item_right">
            <view class="item_name">{{item.giftName}}</view>
            <view class="price" v-if="item.price && item.price != '0.00'">
              <view class="price1">
                ￥{{item.price}}
              </view>
              <view class="price2">
                ￥0
              </view>
            </view>
            <view class="price pricebox" v-else></view>
            
            <view class="time">
              领取时间:{{item.createDate}}
            </view>
          </view>
        </view>
      </view>
      <view class="photo">
        <view class="photo_title">
          现场照片
        </view>
        <image
          @click="ViewImagefm"
          class="photo_img"
          :src="collectData.sitePhotos"
          mode="widthFix"
        />
      </view>
      <view class="scoring" v-if="this.collectData.score">
        <view class="flex_end">
          <view>评价记录</view>
          <view class="wt" @click="fk">问题反馈</view>
        </view>
				<view class="scoringList">
					<view class="scoringItem" v-if="scoringIndex == 20" :class="scoringIndex == 20?'active' : ''">
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringIcon1.png"
							mode="scaleToFill"
							v-if="scoringIndex != 20"
							class="icon"
						/>
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringActiveIcon1.png"
							mode="scaleToFill"
							v-if="scoringIndex == 20"
							class="icon"
						/>
						<view v-if="scoringIndex == -1 || scoringIndex == 20">很不满</view>
					</view>
					<view class="scoringItem" v-if="scoringIndex == 40" :class="scoringIndex == 40?'active' : ''">
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringIcon2.png"
							mode="scaleToFill"
							v-if="scoringIndex != 40"
							class="icon"
						/>
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringActiveIcon2.png"
							mode="scaleToFill"
							v-if="scoringIndex == 40"
							class="icon"
						/>
						<view v-if="scoringIndex == -1 || scoringIndex == 40" :class="scoringIndex == 40?'active' : ''">不满</view>
					</view>
					<view class="scoringItem" v-if="scoringIndex == 60">
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringIcon3.png"
							mode="scaleToFill"
							v-if="scoringIndex != 60"
							class="icon"
						/>
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringActiveIcon3.png"
							mode="scaleToFill"
							v-if="scoringIndex == 60"
							class="icon"
						/>
						<view v-if="scoringIndex == -1 || scoringIndex == 60" :class="scoringIndex == 60?'active' : ''">一般</view>
					</view>
					<view class="scoringItem" v-if="scoringIndex == 80" :class="scoringIndex == 80?'active' : ''">
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringIcon4.png"
							mode="scaleToFill"
							v-if="scoringIndex != 80"
							class="icon"
						/>
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringActiveIcon4.png"
							mode="scaleToFill"
							v-if="scoringIndex == 80"
							class="icon"
						/>
						<view v-if="scoringIndex == -1 || scoringIndex == 80">满意</view>
					</view>
					<view class="scoringItem" v-if="scoringIndex == 100" :class="scoringIndex == 100?'active' : ''">
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringIcon5.png"
							mode="scaleToFill"
							v-if="scoringIndex != 100"
							class="icon"
						/>
						<image
							src="https://pic.bangbangtongcheng.com/icon/scoringActiveIcon5.png"
							mode="scaleToFill"
							v-if="scoringIndex == 100"
							class="icon"
						/>
						<view v-if="scoringIndex == -1 || scoringIndex == 100">很满意</view>
					</view>
					
				</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

/* #ifdef H5 */
import wxshare from "../../utils/index.js";
/* #endif */
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      batchCode: '',
      userInfo: uni.getStorageSync("Pduser"),
      collectData: {},
      collectList: [],
      scoringIndex:'-1',
      latitude: '',
      longitude: '',
      licensePlateNumber: "",
      years: ''
    }
  },
  onLoad(option) {
    this.batchCode = option.batchCode
    this.licensePlateNumber = option.licensePlateNumber
    this.years = option.years
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  onShow() {
    if (uni.getStorageSync('locationState') == 1) {
      this.getLocation()
    }
  },
  methods: {
    async getLocation() {
      let that = this;
      // #ifdef APP-PLUS
      let isAndroid = false;
      const res = uni.getSystemInfoSync();
      if (res.platform == 'android') {
        isAndroid = true;
      } else {
        isAndroid = false;
      }
      if (isAndroid) {
        that.authorizationApp('locationState','android.permission.ACCESS_FINE_LOCATION','您已关闭位置权限或获取位置信息失败',that.getLocation1())
      } else {
        that.getLocation1();
      }
      //  #endif
      // #ifndef APP-PLUS
      that.getLocation1();
      //  #endif 
    },
    fk() {
      uni.navigateTo({ url: '/pages_owner/carMember/chyproblem' })
    },
    getLocation1() { 
      let _this = this;
      uni.getLocation({
        type: "gcj02",
        highAccuracyExpireTime: "3000", 
        success(res) {
          _this.latitude = res.latitude;
          _this.longitude = res.longitude;
          _this.getInfo()
        },
        fail(error) {
          _this.getInfo()
        }
      });
    },
    scoringChange(index) {
      if(this.scoringIndex != -1)return
      this.scoringIndex = index
      
      this.$myRequest.post('/api/mobile/vehicleOwner/scoreMerchant', {
        userId: this.userInfo.id,
        merchantId:this.collectData.merchantId,
        receiveId:this.collectData.id,
        score:index,
      }).then((res) => {
        uni.showToast({
          title: '评价成功',
          icon: 'none',
          mask: true
        })
      })
    },
    fanhui() {
      uni.navigateBack({
        delta: 1
      });
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param
        },
        header: {
          "content-type": "application/x-www-form-urlencoded"
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        }
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"]
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari"
        ]
      });
    },
    openMap(item) {
      let that = this;
      /* #ifdef H5 */
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          // var longitude = latitude;
          // var latitude = latitude;
          // that.setWxShare(re.data)
          uni.hideLoading();
          wxshare.config({
            debug: false, //是否打开调试
            appId: re.data.appId, // 公众号的唯一标识
            timestamp: re.data.timestamp, // 生成签名的时间戳
            nonceStr: re.data.nonce, // ，生成签名的随机串
            signature: re.data.signature, // 签名
            jsApiList: ["openLocation"],
          });
          wxshare.ready(function() {
            wxshare.openLocation({
              latitude: Number(item.latitude), //目的地latitude
              longitude: Number(item.longitude), //目的地longitude
              name: item.merchantName,
              address: item.storeAddress,
              scale: 15, //地图缩放大小，可根据情况具体调整
            });
          });
        },
      });
      /* #endif */
      /* #ifndef H5 */
      uni.openLocation({
        latitude: Number(item.latitude),
        longitude: Number(item.longitude),
        name: item.merchantName,
        address: item.storeAddress,
        success: function() {
          console.log("success");
        },
      });
      /* #endif */
    },
    ViewImagefm() {
      uni.previewImage({
        urls: [this.collectData.sitePhotos],
        current: 0,
      });
    },
    shopDetail(item) {
      if (item.userInformation.businessType == 1 && item.userInformation.isShop == 1) {
        if(item.userInformation.shopType == 1){
          uni.navigateTo({ url: '/pages_intermediary/shopDetails?id=' + item.userInformation.shopId })
        } else if ( item.userInformation.shopType == 2) {
          uni.navigateTo({
            url: "/pages_houses/houses/housesDetails?id=" + item.userInformation.buildingsId
          })
        }
      } else if (item.userInformation.businessType == 2 && item.userInformation.isShop == 1) {
        if(item.userInformation.shopType == 1 || item.userInformation.shopType == 2){
          uni.navigateTo({
            url: "/pages_owner/dealer/dealerDetails?id=" + item.userInformation.shopId
          })
        }else if(item.userInformation.shopType ==3 || item.userInformation.shopType ==4 ){
          // 跳维修店
          uni.navigateTo({
            url: "/pages_owner/ownerService/ownerServiceDetails?id=" + item.userInformation.shopId
          })
        }
      } else if (item.userInformation.businessType == 0 && item.userInformation.enterpriseRecruitmentStatus == 1) {
        uni.navigateTo({ url: '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' + item.userInformation.id })
      } else {
        uni.navigateTo({ url: '/pages_owner/dealer/goldConsultant?userId=' + item.userInformation.id })
      }
      // uni.navigateTo({ url: '/pages_intermediary/shopDetails?id=' + item.merchantGiftDistributions[0].id })
    },
    getInfo() {
      let date = new Date()
      uni.showLoading({
        title: '加载中'
      });
      this.$myRequest.get("/api/mobile/vehicleOwner/getReceiveRecordByLicensePlateNumber", {
          batchCode: this.batchCode,
          licensePlateNumber: this.licensePlateNumber,
          latitude: this.latitude,
          longitude: this.longitude,
          years: this.years
				}).then((res) => {
        if (res.giftReceiveRecord.length != 0) {
          var merchantId = res.giftReceiveRecord.pageList[0].merchantId
          this.collectData = res.giftReceiveRecord.pageList[0]
          this.collectList = res.giftReceiveRecord.pageList.filter(item => item.merchantId == merchantId)
          this.scoringIndex = this.collectData.score
        }
        uni.hideLoading();
      });
    },
  },
}
</script>
<style lang="less" scoped>

	.box {
		width: 100%;
		min-height: 100vh;
		// padding-bottom: 130rpx;
		background-color: #F2F2F2;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}

		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
	
  .content{
    padding: 30rpx;
    .list{
      padding: 28rpx;
      background: #fff;
      border-radius: 24rpx;
      margin-bottom: 20rpx;
      .item{
        display: flex;
        margin-bottom: 20rpx;
        .item_img{
          width: 250rpx;
          height: 150rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
          opacity: 1;
        }
        .item_right{
          width: calc(100% - 270rpx);
          .item_name{
            font-size: 30rpx;
            line-height: 42rpx;
            color: #333;
          }
          .price{
            display: flex;
            margin-bottom: 30rpx;
            .price1{
              font-size: 24rpx;
              margin-right: 12rpx;
              line-height:42rpx;
              color: #666666;
              text-decoration: line-through;
            }
            .price2{
              color: #EA4B4B;
              font-size: 32rpx;
              line-height:42rpx;
            }
          }
          .pricebox{
            height: 42rpx;
            width: 100%;
          }
          .time{
            color: #999999;
            font-size: 26rpx;
            line-height: 36rpx;
          }
        }
      }
      .item:last-child {
        margin-bottom: 0;
      }
    }
    .photo {
      padding: 28rpx;
      background: #fff;
      border-radius: 24rpx;
      margin-bottom: 20rpx;
      .photo_title{
        font-size: 30rpx;
        line-height: 42rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      .photo_img{
        width: 100%;
      }
    }
    .scoring{
      padding: 28rpx;
      background: #fff;
      border-radius: 24rpx;
      .flex_end {
        font-size: 30rpx;
        line-height: 42rpx;
        margin-bottom: 40rpx;
      }
      .wt{
        text-align: right;
        font-size: 30rpx;
        line-height: 42rpx;
      }
      .tips{
        color: #666666;
        font-size: 28rpx;
        line-height: 39rpx;
        text-align: center;
        margin-bottom: 48rpx;
      }
      .scoringList{
        display: flex;
        justify-content: center;
        padding: 0 45rpx;
        margin-bottom: 10rpx;
        .scoringItem{
          text-align: center;
          .icon {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 8rpx;
          }
          view {
            color: #222;
            font-size: 26rpx;
            line-height: 36rpx;
          }
        }
      }
    }
  }
	.fixed {
		// display: flex;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100% !important;
		z-index: 40;
	}
  .boxtop{
    padding: 30rpx;
    background: #fff;
    display: flex;
    .top_img{
      width: 186rpx;
      height: 134rpx;
      box-shadow: 0px 0px 6rpx 0px rgba(67,67,67,0.102);
      border-radius: 16rpx;
      opacity: 1;
      margin-right: 20rpx;
    }
    .top_right{
      width: calc(100% - 206rpx);
      display: flex;
      .flex{
        width: 100%;
        align-items: flex-end;
      }
      .flex_left_box{
        width: calc(100% - 100rpx);
      }
      .top_name{
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //溢出用省略号显示
        white-space:nowrap; //溢出不换行
        font-size: 28rpx;
        line-height: 1;
        font-weight: 500;
        color: #333333;
        margin-bottom: 20rpx;
      }
      .red {
        color: red;
        font-size: 24rpx;
        line-height: 28rpx;
        margin-bottom: 10rpx;
      }
      .address{
        color: #666666;
        font-size: 20rpx;
        line-height: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp:2; //显示的行
        min-height: 56rpx;
      }
      
      .distance {
        width: 100rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: #666666;
        text-align: center;
        .img {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }

</style>